﻿@model MvcApplication3.Models.Person

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title>Index</title>
</head>
<body>
    <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

    @* add these two scripts *@
    <script src="@Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/MicrosoftMvcValidation.js")" type="text/javascript"></script>


    @* add this too *@
    @{ Html.EnableClientValidation(); }

    @using (Html.BeginForm(null, null, FormMethod.Post, new { id = "See" } ))
    {
        @Html.ValidationSummary(true)
        <fieldset>
            <legend>Person</legend>
    
            <div class="editor-label">
                @Html.LabelFor(model => model.Lastname)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Lastname)
                @Html.ValidationMessageFor(model => model.Lastname)
            </div>
    
            <div class="editor-label">
                @Html.LabelFor(model => model.Firstname)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Firstname)
                @Html.ValidationMessageFor(model => model.Firstname)
            </div>
    
            <div class="editor-label">
                @Html.LabelFor(model => model.Age)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Age)
                @Html.ValidationMessageFor(model => model.Age)
            </div>
    
            <div class="editor-label">
                @Html.LabelFor(model => model.Email)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Email)
                @Html.ValidationMessageFor(model => model.Email)
            </div>
    
            <p>
                <input type="submit" id="submitter" value="Create" />
            </p>
        </fieldset>
    }
    



    <script type="text/javascript">


        $("#submitter").click(function (event) {

            // this prevent the roundtrip to server            
            event.preventDefault();

            // this prevent ajax-sending if there's still an invalid logic on model
            if (!$("#See").validate().form()) return;

            $.ajax(
                {
                    url: '/Home/Create/',
                    type: 'POST',
                    dataType: 'json',
                    // .serialize is a free beer
                    data: $("#See").serialize(),
                    // whereas if there's no .serialize, you have to send individual inputs manually
                    // i.e.
                    // data: { Lastname : $("#Lastname").val(), Firstname : $("#Firstname").val() },

                    success: function (r) {
                        alert(r.Message);
                    }
                });

        });


        


    </script>
</body>
</html>

